<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="互联网图片1" class="left-image"/>
        <img :src="imageUrls[1]" alt="互联网图片2" class="left-image"/>
      </div>

      <DynamicFlowEconomyComponent
          :title="'培育流量经济新业态'"
          :content="[
'利用社交媒体、移动应用、在线广告等数字渠道，提高铅山生态产品的在线可见度和互动性。探索建立由非遗传承人、文明实践员、大学生村官、网评员、本土网红等群体为主要成员的媒体矩阵，发挥流量经济的引领作用，形成县乡村三级新媒体组织体系，让新媒体流量赋能城市发展，营造全民宣传正面氛围。',
    '充分发挥赛事、节会等平台、窗口作用，通过讲述生态产品背后的故事，如生产过程、原材料来源、环保理念等，开展各类生态产品线下推介活动，建立消费者与产品的情感联系。通过提供产品试用、农场参观、生产过程体验等活动，让消费者亲身体验生态产品的优势。在北京、上海、广州、深圳开设铅山农产品专卖店；在淘宝、京东、天猫等网购平台开设网店，在抖音等平台开通直播带货渠道，大力发展订单农业，支持经营主体实施专柜专销、直供直销，开拓电商化营销模式，大力推动产品外销，拓展国内国际市场，提升品牌价值和产品附加值。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E4%BA%92%E8%81%94%E7%BD%91.jpg',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E4%BA%92%E8%81%94%E7%BD%911.jpg'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '互联网图片1' : '互联网图片2';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
